<template>
  <el-dialog title="列设置" :visible.sync="innerVisible" :modal-append-to-body="true" :append-to-body="true" class="setColumnDialogWrap" width="560px">
    <div class="setColumnDialogBox">
      <p class="title">拖动列名进行排序</p>
      <div v-if="innerVisible" ref="dragTableBox" class="tableBox">
        <el-table ref="dragTable" :data="list" class="setColumnTable" :row-class-name="({ row, rowIndex }) => (rowIndex === 0 ? 'rowFirst' : '')">
          <!-- <el-table-column type="index" label="序号" /> -->
          <el-table-column prop="code" label="编码" class-name="prop" width="100" />
          <el-table-column prop="name" label="名称" />
          <el-table-column label="列宽" width="140">
            <template slot-scope="scope">
              <el-select v-model="scope.row.width" clearable filterable allow-create default-first-option placeholder="请选择">
                <el-option v-for="item in options" :key="item" :label="item" :value="item" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="是否可见" width="100">
            <template slot-scope="scope">
              <i :class="{ 'el-icon-view': true, icon: true, iconVisible: scope.row.visible }" @click="scope.row.visible = !scope.row.visible" />
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="innerVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveSetColumn">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { saveUserMenuExtensionsBatchSave } from '@/api/advanced'
import Sortable from 'sortablejs'
export default {
  name: 'SetColumn',
  props: {
    list: {
      type: Array,
      require: true,
      default: () => [],
    },
    visible: {
      type: Boolean,
      require: true,
      default: false,
    },
    options: {
      type: Array,
      require: true,
      default: () => [],
    },
  },
  computed: {
    innerVisible: {
      get: function() {
        return this.visible
      },
      set: function(val) {
        this.$emit('update:visible', val)
      },
    },
  },
  watch: {
    innerVisible: function(val) {
      if (val) {
        this.$nextTick(() => {
          this.initSetColumn()
        })
      }
    },
  },
  methods: {
    // 保存自定义列
    saveSetColumn() {
      const list = this.list
      const data = []
      this.$refs.dragTableBox.querySelectorAll('.el-table__row').forEach((item) => {
        const prop = item.querySelector('.prop').textContent
        const find = Object.assign(
          {},
          list.find((item) => item.code === prop)
        )
        data.push(find)
      })
      saveUserMenuExtensionsBatchSave(data).then((res) => {
        this.$emit('saveSetColumn', data)
      })
    },
    // 开启自定义列
    initSetColumn() {
      const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
      const sortTable = Sortable.create(el, {
        ghostClass: 'sortable-ghost', //  Class name for the drop placeholder,
        setData: function(dataTransfer) {
          //  to avoid Firefox bug
          //  Detail see : https:// github.com/RubaXa/Sortable/issues/1012
          dataTransfer.setData('Text', '')
        },
        onEnd: (evt) => {},
      })
      return sortTable
    },
  },
}
</script>
